<template>
  <div>
    <h2>文章({{total}})</h2>
    <header>
      <el-select v-model="articleType" placeholder="请选择" @change="selectChange">
        <el-option v-for="item in typeList" :key="item._id" :label="item.typeName" :value="item._id">
        </el-option>
      </el-select>
      <el-icon @click="toAddArticle" color="#000" :size="20" class="addIcon">
        <plus />
      </el-icon>
    </header>
    <el-table :data="list" style="width: 100%; height: 400px" :row-class-name="tableRowClassName">
      <el-table-column prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column prop="title" label="标题">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pag" background layout="prev, pager, next" @current-change="currentChange" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import {
    toRefs,
    reactive,
    onMounted
  } from 'vue'
  import {
    findAllArticle,
    findArticleType,
    removeArticle
  } from '../../plugins/request'
  import {
    useRouter
  } from 'vue-router'
  import { Plus } from '@element-plus/icons'
  import {ElMessage, ElMessageBox } from 'element-plus'
  export default {
    components: {
      Plus
    },
    setup() {
      const state = reactive({
        typeList: [{
          typeName: '请选择',
          _id: ''
        }],
        list: [],
        total: 0,
        value: '',
        page: 1,
        size: 10,
        articleType: ''
      })
      onMounted(() => {
        findAllType()
        findList()
      })
      const router = useRouter()
      const findAllType = async () => {
        let {
          data
        } = await findArticleType({})
        if (data.status != 1) return
        state.typeList.push(...data.data.data)
      }
      const findList = async () => {
        let params = {
          'page': state.page,
          'size': state.size,
          'articleType': state.articleType
        }
        let {
          data
        } = await findAllArticle(params)
        if (data.status != 1) return
        state.list = data.data.data
        state.total = data.data.total
      }
      const handleEdit = (val) => {

        router.push(`/addArticle?id=${val.row.id}`)
      }
      const currentChange = (val) => {
        state.page = val
        findList()
      }
      const handleDelete = (val) => {
        ElMessageBox.confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let {
            data
          } = await removeArticle({
            'id': val.row.id
          })
          if (data.status == 1) {
            ElMessage.success('删除成功')
            state.list.splice(val.index_, 1)
          } else {
            ElMessage.error('删除失败');
          }
        }).catch((e) => {
          ElMessage({
            type: 'info',
            message: '已取消删除' + e
          });
        });
      }
      const toAddArticle = () => {
        router.push('/addArticle')
      }
      const tableRowClassName = ({
        row,
        rowIndex
      }) => {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
      const selectChange = () => {
        findList()
      }
      return {
        ...toRefs(state),
        handleEdit,
        handleDelete,
        toAddArticle,
        tableRowClassName,
        currentChange,
        selectChange
      }
    }
  }
</script>

<style lang="scss" scoped>
  header {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .addIcon {
      cursor: pointer;
      font-size: 30px;
    }
  }

  .pag {
    text-align: center;
    margin-top: 10px;
  }
</style>